<template>
  <el-drawer title="全局设置" :visible.sync="visible" :with-header="false" size="650px">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">全局设置</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="bg-white border-radius padding-bottom-lg">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title ">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              课程设置
            </div>
          </div>
          <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="120px">
            <el-form-item label="视频连播时长:" prop="course_video_max_play_time">
              <div class="flex">
                <el-input style="width: 100px" v-model="dataForm.course_video_max_play_time" placeholder=""></el-input>
                <div class="margin-left-sm">分钟</div>
                <div class="margin-left-sm text-gray">课程视频的连续播放时长，到达时长后自动暂停</div>
              </div>
            </el-form-item>

            <el-form-item label="文档静止时长:" prop="course_doc_max_stop_time">
              <div class="flex">
                <el-input style="width: 100px" v-model="dataForm.course_doc_max_stop_time" placeholder=""></el-input>
                <div class="margin-left-sm">秒</div>
                <div class="margin-left-sm text-gray">阅读文档时长时间未操作，自动暂停计时</div>
              </div>
            </el-form-item>

            <el-form-item label="进度记录间隔:" prop="course_progress_interval">
              <div class="flex">
                <el-input style="width: 100px" v-model="dataForm.course_progress_interval" placeholder=""></el-input>
                <div class="margin-left-sm">秒</div>
                <div class="margin-left-sm text-gray">学习进度上报记录的时间间隔</div>
              </div>
            </el-form-item>

            <el-form-item label="考试及格系数:" prop="exam_pass_scroe_ratio">
              <div class="flex">
                <el-input style="width: 100px" v-model="dataForm.exam_pass_scroe_ratio" placeholder=""></el-input>
                <div class="margin-left-sm">%</div>
                <div class="margin-left-sm text-gray">考试通过分数占总分的比例，用于自动设置通过分数</div>
              </div>
            </el-form-item>


            <el-form-item label="课程评价状态:" size="mini" prop="course_evaluate_status">
              <el-radio-group v-model="dataForm.course_evaluate_status">
                <el-radio :label="0">停用课程评价</el-radio>
                <el-radio :label="1">启用课程评价</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="课程考核状态:" size="mini" prop="course_exam_status">
              <el-radio-group v-model="dataForm.course_exam_status">
                <el-radio :label="0">停用课程考核</el-radio>
                <el-radio :label="1">启用课程考核</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="课程学时模式" size="mini" prop="course_credit_mode">
              <el-radio-group v-model="dataForm.course_credit_mode">
                <el-radio :label="0">课程统一设定</el-radio>
                <el-radio :label="1">资源独立设定</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="课程价格模式" size="mini" prop="course_price_mod">
              <el-radio-group v-model="dataForm.course_price_mod">
                <el-radio :label="0">手动报价</el-radio>
                <el-radio :label="1">学时单价换算</el-radio>
                <el-radio :label="2">学时总价换算</el-radio>

              </el-radio-group>
            </el-form-item>

            <el-form-item label="自动订购课程:" size="mini" prop="course_auto_order_type">
              <el-select  v-model="dataForm.course_auto_order_type" placeholder="请选择" style="width: 200px;">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          
        </div>
        <div class="text-center padding-10">
          <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
        </div>
       
      </div>
    </div>

  </el-drawer>
</template>

<script>

export default {
  data() {
    return {
      dataForm: {},
      dataListLoading: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '20px !important', padding: '4px !important' },
      direction: 'rtl',
      visible: false,
      dataList: [],
      configList:[],
      typeOptions: [
        {
          value: '',
          label: '请选择'
        }, {
          value: 0,
          label: '专业科目'
        }, {
          value: 1,
          label: '公需科目'
        }
      ],
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {

    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
    },
    dataFormSubmit(){
      //先处理数据，将dataForm放入configList中对应的 k 和 V
      console.log(this.dataForm)
      console.log(this.configList)
      if(this.configList&&this.configList.length>0){
        this.configList.forEach(item=>{
           //先判断this.dataForm 是否包含 item.k
           if(this.dataForm.hasOwnProperty(item.k)){
              item.v = this.dataForm[item.k]
           }
        })
      }
      console.log(this.configList)
      //调用保存方法
      this.$http({
        url: this.$http.adornUrl('/sys/ysxhConfig/update'),
        method: 'post',
        data: this.$http.adornData(this.configList, false)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration:1500,
          })
          this.$emit('refreshDataList')
          this.handleClose()
        }
      })
      
    },
    init() {
      //loading
      this.$loading({
        lock: true,
        text: "加载中",
        background: "rgba(0, 0, 0, 0.5)",
      });
      this.$http({
        url: this.$http.adornUrl(`/sys/ysxhConfig/list`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data)
          this.dataForm = Object.assign({}, this.dataForm, data.config.configMap)
          this.configList = data.config.configList;
        }
        this.$loading().close();
      }).catch((err) => {
        this.$loading().close();
      });
      this.visible = true;
    },
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}
</style>
